<template>
<!-- 1、 v-text 显示 内置指令-->
<div v-text="t" class="a1"></div>
<!--2、 v-html 显示加粗 这是xxx的页面-->
<div v-html="h" class="a2" ></div>
<!-- 3、v-bind 显示图片 -->
<div>
<button @click="img2">点击更换图片</button>
<img :src="url" class="a3" v-show="a">
</div>
<!--3、 v-on@click-->

<!--4、 v-model -->
姓名是：<input v-model="username">
<div>{{ username }}</div>
<button @click="type='A'">王承烨</button>
<br>
<p v-if="type=='A'">王承烨 2430150146</p>

<button @click="a=!a">点击隐藏图片</button>

<p v-for="(item,index) in arr" :key="index">
序号是：{{ index +1}} --- 指令是：{{ item }}

</p>
</template>
<script setup>
import { ref } from 'vue';
const t='内置指令'
const h='这是王承烨的页面'
const url=ref(new URL('../assets/1.png', import.meta.url).href)
const img2=()=>{
url.value=new URL('../assets/2.png',import.meta.url).href
}
const username = ref("");
let type = ref('');
let a = ref(true)
let arr = ['v-text','v-html','v-bind','v-on','v-model','v-if','v-show','v-for']
</script>
<style scoped>
.a2 {
font-weight: 800;
}
.a3{
width: 200px;
height: 200px;
}
</style>
